<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>我的购物车</title>
    <style>
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #f3f4f6, #e2e8f0);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.container {
    max-width: 900px;
    margin: 50px auto;
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
    transform: translateY(0);
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

th, td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

th {
    background-color: #f7f7f7;
    font-weight: 600;
}
.btn{
padding: 10px 16px;
    background: linear-gradient(to right, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.3s;;
}
.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.total {
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    color: #e74c3c;
}
.btn-back {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #c3aed6, #a393eb);
    border: none;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(163, 147, 235, 0.3);
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
}

.btn-back:hover {
    background: linear-gradient(135deg, #a393eb, #c3aed6);
    box-shadow: 0 6px 20px rgba(163, 147, 235, 0.4);
    transform: translateY(-2px);
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    </style>
</head>
<body>
<div class="container">
    <h2>我的购物车</h2>
    <!-- 返回按钮 -->
    <a href="javascript:history.back()" class="btn-back">← 返回</a>

    <c:if test="${empty cartItemList}">
        <p>购物车为空</p>
    </c:if>
    <c:if test="${not empty cartItemList}">
        <form action="${pageContext.request.contextPath}/front/order/confirm" method="post" id="cartForm">
            <table>
                <thead>
                <tr>
                    <th>选择</th>
                    <th>商品图</th>
                    <th>商品名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach var="item" items="${cartItemList}" varStatus="loop">
                    <tr>
                        <td>
                            <input type="checkbox" class="selectItem" name="productIds" value="${item.product.id}" checked>
                        </td>
                        <td><img src="${item.product.imageUrl}" alt="${item.product.name}" width="80" /></td>
                        <td>${item.product.name}</td>
                        <td>￥<span class="unitPrice">${item.product.price}</span></td>
                        <td>
                            <input type="number" class="quantity" name="quantities" value="${item.quantity}" min="1" style="width:60px;">
                        </td>
                        <td>
                            <input type="checkbox" class="selectItem" name="selected" value="${item.product.id}" checked>
                        </td>
                        <td>￥<span class="subtotal">${item.product.price * item.quantity}</span></td>
                        <td>
                            <a href="${pageContext.request.contextPath}/front/cart/remove?productId=${item.product.id}" class="btn">移除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <p class="total">总计：￥<span id="totalAmount">0.00</span></p>
            <button type="submit" class="btn">去结算</button>
        </form>
    </c:if>
</div>
<script>
    function recalculate() {
        let total = 0;
        const rows = document.querySelectorAll("tbody tr");
        rows.forEach(row => {
            const checkbox = row.querySelector(".selectItem");
            const quantityInput = row.querySelector(".quantity");
            const unitPrice = parseFloat(row.querySelector(".unitPrice").innerText);
            const subtotalEl = row.querySelector(".subtotal");

            const quantity = parseInt(quantityInput.value) || 1;
            const subtotal = unitPrice * quantity;

            subtotalEl.innerText = subtotal.toFixed(2);

            if (checkbox.checked) {
                total += subtotal;
            }
        });
        document.getElementById("totalAmount").innerText = total.toFixed(2);
    }

    // 监听所有数量输入框和勾选框变化
    document.querySelectorAll(".quantity, .selectItem").forEach(el => {
        el.addEventListener("input", recalculate);
        el.addEventListener("change", recalculate);
    });

    // 初次加载时计算一次总价
    window.onload = recalculate;
</script>
</body>
        </html>